<template>
  <view class="hx-numbox">
    <view v-if="!hiddenHandle && value > 0 && ifMinus" @click="_calcValue('minus')" class="hx-numbox-item hx-numbox__minus">
      <text class="hx-numbox--text" :class="{ 'hx-numbox--disabled': value <= min || disabled }">-</text>
    </view>

    <view v-if="value > 0" class="hx-numbox__value" type="number">{{ value }}</view>

    <view v-if="!hiddenHandle" @click="_calcValue('plus')" class="hx-numbox-item hx-numbox__plus">
      <text class="hx-numbox--text" :class="{ 'hx-numbox--disabled': value >= max || disabled }">+</text>
    </view>
  </view>
</template>
<script>
export default {
  name: 'hxNumberBox',
  props: {
    value: {
      type: [Number, String],
      default: 0
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 1000
    },
    step: {
      type: Number,
      default: 1
    },
    disabled: {
      type: Boolean,
      default: false
    },
    rowData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    /**
     * 隐藏加减操作按钮
     * 使用场景： 适用于套餐配送弹框, 当套餐配送为固送时，隐藏可加减操作只显示数字
     */
    hiddenHandle: {
      type: Boolean,
      default: false
    },
    /**
     * 当前选中数目为最小起送数时隐藏减号
     * 使用场景： 适用于套餐配送弹框, 当主套餐数量为 1 的时候隐藏减法操作
     */
    minHiddenMinus: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      inputValue: 0
    }
  },
  computed: {
    // 是否显示减号
    ifMinus() {
      if (this.minHiddenMinus) {
        if (this.value === this.min) {
          return false
        }
      }
      return true
    }
  },
  methods: {
    _calcValue(type) {
      this.inputValue = this.value

      if (this.disabled) return

      let step = Number(this.step)
      let inputValue = Number(this.inputValue)
      let min = Number(this.min)
      let max = Number(this.max)

      // 减法
      if (type === 'minus') {
        inputValue = inputValue - step

        if (inputValue < min) {
          inputValue = 0
        }

        if (inputValue > max) {
          inputValue = max
        }

        this.$emit('lessChange', inputValue, this.rowData)
      }

      // 加法
      if (type === 'plus') {
        inputValue = inputValue + step

        if (inputValue > max) {
          inputValue = max
        }

        if (inputValue < min) {
          inputValue = min
        }

        this.$emit('addChange', this.inputValue, this.rowData)
      }

      this.inputValue = inputValue
      this.$emit('change', this.inputValue, this.rowData, type)
    }
  }
}
</script>
<style lang="scss" scoped>
$box-line-height: 24px;
$box-width: 24px;
$box-height: 24px;

.hx-numbox {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: $font-size-base;
  color: $gold;
}

// - number +
.hx-numbox__value {
  min-width: 40px;
  text-align: center;
  padding: 0 5px;
  white-space: nowrap;
}

.hx-numbox-item {
  display: flex;
  justify-content: center;
  align-items: center;

  width: $box-width;
  height: $box-height;
  text-align: center;
  padding-bottom: 1px;
}

// -
.hx-numbox__minus {
  border: 1px solid $gold;
}

// +
.hx-numbox__plus {
  @include bg-gold;
}
</style>
